<template>
	<newDialog :title="title" :dialogVisible="dialogVisible" width="50%" :ensureLoading='ensureLoading' @closeDialog='closeDialog'
	 @submitDialog='submitDialog' :isShowBtn='isShowBtn' class='elList'>
		<div slot='content'>
			<el-form :model="form" ref='form' size="mini" :rules="rules" v-loading='isLoading' label-width="120px">
				<el-row>
					<el-col :span="7">
						<el-form-item label="公告类型:">
							<el-select :disabled="detailDisable" v-model="form.announcementType" placeholder="请选择公告类型" filterable clearable>
								<el-option v-for="item in announcementTypeArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="数据类型:">
							<el-select :disabled="detailDisable" v-model="form.dataType" placeholder="请选择数据类型" filterable clearable>
								<el-option v-for="item in dataTypeArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="是否停用:">
							<el-select :disabled="detailDisable" v-model="form.blockUp" placeholder="请选择是否停用" filterable clearable>
								<el-option v-for="item in blockUpArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						<el-form-item label="保持秒数:">
							<el-input v-model="form.keepSeconds" clearable :disabled="detailDisable" placeholder="请输入保持秒数"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="播放开始日期:">
							<el-date-picker @change='changeDate' :disabled="detailDisable" v-model="form.startDate" type="date" placeholder="选择开始日期"
							 format="yyyy-MM-dd" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="播放结束日期:">
							<el-date-picker :picker-options="pickerOptions" :disabled="detailDisable || endDateDisabled" v-model="form.endDate"
							 type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="滚动播放内容:">
							<el-input type="textarea" v-model="form.playContent" clearable :disabled="detailDisable" placeholder="请输入公告播放内容"
							 resize="none" :rows="5"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='1'>
						<el-form-item label="备注:">
							<el-input type="textarea" v-model="form.desc" clearable :disabled="detailDisable" placeholder="请输入备注" resize="none"
							 :rows="5"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div v-if="title != '新建公告'">
					<el-row>
						<el-col :span="7">
							<el-form-item label="创建用户:">
								<el-input v-model="form.createUser" clearable :disabled="true" placeholder="请输入创建用户"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="创建时间:">
								<el-date-picker :disabled="true" v-model="form.createTime" type="date" placeholder="选择创建时间" format="yyyy-MM-dd HH:mm:ss"
								 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="修改用户:">
								<el-input v-model="form.changeUser" clearable :disabled="true" placeholder="请输入修改用户"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label="修改时间:">
								<el-date-picker :disabled="true" v-model="form.changeTime" type="date" placeholder="选择修改时间" format="yyyy-MM-dd HH:mm:ss"
								 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</div>
	</newDialog>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosChange,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	import newDialog from '@/components/publicComponents/dialogComp.vue'
	export default {
		components: {
			newDialog
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return '提示'
				}
			},
			rowId: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		mounted() {
			if (this.rowId) {
				this.getComList()
			}
			if (this.title == '公告详情') {
				this.isShowBtn = false
			}
		},
		data() {
			return {
				endDateDisabled: true,
				isShowBtn: true,
				ensureLoading: false,
				isLoading: false,
				form: {
					announcementType: '',
					dataType: '',
					blockUp: '',
					keepSeconds: '',
					startDate: '',
					endDate: '',
					playContent: '',
					desc: '',
					createUser: '',
					createTime: '',
					changeUser: '',
					changeTime: ''
				},
				blockUpArr: [{
					value: '0',
					label: '不是',
				}, {
					value: '1',
					label: '是',
				}],
				announcementTypeArr: [{
					value: '0',
					label: '常驻公告',
				}, {
					value: '1',
					label: '临时公告',
				}],
				dataTypeArr: [{
					value: '0',
					label: '文字',
				}],
				rules: {

				}
			}
		},
		computed: {
			BroadcastManageId() {
				if (localStorage.BroadcastManageId) {
					return JSON.parse(localStorage.BroadcastManageId).id
				} else {
					return ''
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < this.newMoment(this.form.startDate)
					}
				}
			},
			detailDisable() {
				if (this.title == '公告详情') {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			changeDate(val) {
				this.form.endDate = ''
				if (val) {
					this.endDateDisabled = false
				} else {
					this.endDateDisabled = true
				}
			},
			getComList() {
				this.isLoading = true
				let url = '/res/queue/material/' + this.rowId + '/'
				axiosGet(url, {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.announcementType = res.detail.ntype
						this.form.dataType = res.detail.dtype
						this.form.blockUp = res.detail.is_disabled
						this.form.keepSeconds = res.detail.retention_time
						this.form.startDate = res.detail.start_day
						this.form.endDate = res.detail.end_day
						this.form.playContent = res.detail.content
						this.form.desc = res.detail.qdesc
						this.form.createUser = res.detail.create_user
						this.form.createTime = res.detail.start_day
						this.form.changeUser = res.detail.update_user
						this.form.changeTime = res.detail.end_day
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			closeDialog() {
				this.$emit('closeMask')
			},
			submitDialog() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.ensureLoading = true
						let url = ''
						let method = ''
						let data = {
							play_queue: this.BroadcastManageId,
							ntype: this.form.announcementType,
							dtype: this.form.dataType,
							is_disabled: this.form.blockUp,
							retention_time: this.form.keepSeconds,
							start_day: this.form.startDate,
							end_day: this.form.endDate,
							content: this.form.playContent,
							qdesc: this.form.desc
						}
						if (!this.rowId) {
							url = '/res/queue/material/'
							method = 'post'
						} else {
							url = '/res/queue/material/' + this.rowId + '/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureLoading = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('submitDialog')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
